<template>
    <div id="bottomRight">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color: #5cd9e8;">
                    <icon name="chart-area" />
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">发电累计时长统计图</span>
                </div>
            </div>
            <div>
                <div id="bottomrightcontainer" style="width: 100%; height: 15rem;" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colorList: {
                linearYtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#f5b44d'
                        },
                        {
                            offset: 1,
                            color: '#28f8de'
                        }
                    ]
                },
                linearGtoB: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#43dfa2'
                        },
                        {
                            offset: 1,
                            color: '#28f8de'
                        }
                    ]
                },
                linearBtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#1c98e8'
                        },
                        {
                            offset: 1,
                            color: '#28f8de'
                        }
                    ]
                },
                areaBtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(35,184,210,.2)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(35,184,210,0)'
                        }
                    ]
                }
            },
            cdata: {
                year: null,
                weekCategory: [],
                radarData: [],
                radarDataAvg: [],
                maxData: 12000,
                weekMaxData: [],
                weekLineData: []
            },
            options: {
                title: {
                    text: '',
                    textStyle: {
                        color: '#D3D6DD',
                        fontSize: 24,
                        fontWeight: 'normal'
                    },
                    subtext: [], // newData.year + '/' + newData.weekCategory[6],
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    top: 50,
                    left: 80
                },
                legend: {
                    top: 10,
                    left: 80,
                    orient: 'vertical',
                    itemGap: 15,
                    itemWidth: 12,
                    itemHeight: 12,
                    data: ["平均发电", "每日发电"],
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                radar: {
                    center: ['68%', '27%'], // 雷达中心
                    radius: '32%', // 雷达图直径大小
                    name: {
                        color: '#fff'
                    },
                    splitNumber: 8,
                    axisLine: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#f5b44d'
                                    },
                                    {
                                        offset: 1,
                                        color: '#28f8de'
                                    }
                                ]
                            },
                            opacity: 0.6
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#f5b44d'
                                    },
                                    {
                                        offset: 1,
                                        color: '#28f8de'
                                    }
                                ]
                            },
                            opacity: 0.6
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: '#fff',
                            opacity: 0.1,
                            shadowBlur: 25,
                            shadowColor: '#000',
                            shadowOffsetX: 0,
                            shadowOffsetY: 5
                        }
                    },
                    indicator: [
                        {
                            name: '乡镇基站',
                            max: 12000
                        },
                        {
                            name: '偏远基站',
                            max: 10
                        },
                        {
                            name: '重点局房',
                            max: 12
                        },
                        {
                            name: '县城市区',
                            max: 3
                        }
                    ]
                },
                grid: {
                    left: 60,
                    right: 60,
                    bottom: 20,
                    top: '60%'
                },
                xAxis: {
                    type: 'category',
                    position: 'bottom',
                    axisLine: true,
                    axisLabel: {
                        color: 'rgba(255,255,255,.8)',
                        fontSize: 12
                    },
                    data: [] // newData.weekCategory
                },
                // 下方Y轴
                yAxis: {
                    name: '小时',
                    nameLocation: 'end',
                    nameGap: 24,
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: 14
                    },
                    max: 12000,
                    splitNumber: 4,

                    axisLine: {
                        lineStyle: {
                            opacity: 0
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            opacity: 0.1
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.8)',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'radar',
                        symbolSize: 0,
                        data: [
                            {
                                value: [], // newData.radarDataAvg[6],
                                name: '平均指标',
                                itemStyle: {
                                    normal: {
                                        color: '#f8d351'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        opacity: 0
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#f8d351',
                                        shadowBlur: 25,
                                        shadowColor: 'rgba(248,211,81,.3)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: -10,
                                        opacity: 1
                                    }
                                }
                            },
                            {
                                value: [], // newData.radarData[6],
                                name: '我的指标',
                                itemStyle: {
                                    normal: {
                                        color: '#43dfa2'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        opacity: 0
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: '#43dfa2'
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#28f8de'
                                                }
                                            ]
                                        },
                                        shadowBlur: 15,
                                        shadowColor: 'rgba(0,0,0,.2)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        opacity: 0.8
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '',
                        type: 'line',
                        smooth: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color: '#fff'
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#1c98e8'
                                        },
                                        {
                                            offset: 1,
                                            color: '#28f8de'
                                        }
                                    ]
                                },
                                width: 3
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(35,184,210,.2)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(35,184,210,0)'
                                        }
                                    ]
                                }
                            }
                        },
                        data: [], // newData.weekLineData,
                        lineSmooth: true,
                        markLine: {
                            silent: true,
                            data: [
                                {
                                    type: 'average',
                                    name: '平均值'
                                }
                            ],
                            precision: 0,
                            label: {
                                normal: {
                                    formatter: '平均值: \n {c}'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: 'rgba(248,211,81,.7)'
                                }
                            }
                        },
                        tooltip: {
                            position: 'top',
                            formatter: '{c} m',
                            backgroundColor: 'rgba(28,152,232,.2)',
                            padding: 6
                        }
                    },
                    {
                        name: '占位背景',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#000',
                                opacity: 0
                            }
                        },
                        silent: true,
                        barWidth: '50%',
                        data: [], // newData.weekMaxData,
                        animation: false
                    }
                ]
            }
        }
    },
    mounted() { 
        this.drawTimingFn(),
        this.initEchart()
    },
    beforeDestroy() {
        clearInterval(this.drawTiming)
    },
    methods: {
        initEchart() {
            var chartDom = document.getElementById('bottomrightcontainer')
            var myChart = this.$echarts.init(chartDom)
            myChart.setOption(this.options)  
        },
        drawTimingFn() {
            this.setData()
            this.drawTiming = setInterval(() => {
                this.setData()
            }, 6000)
        },
        setData() {
            // 清空轮询数据
            this.cdata.weekCategory = []
            this.cdata.weekMaxData = [] //
            this.cdata.weekLineData = []
            this.cdata.radarData = []
            this.cdata.radarDataAvg = []

            let dateBase = new Date()
            this.cdata.year = dateBase.getFullYear()
            // 周数据
            for (let i = 0; i < 7; i++) {
                // 日期
                let date = new Date()
                this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate() - i].join('/'))

                // 折线图数据
                this.cdata.weekMaxData.push(this.cdata.maxData)
                let distance = Math.round(Math.random() * 11000 + 500)
                this.cdata.weekLineData.push(distance)

                // 雷达图数据
                // 我的指标
                let averageSpeed = +(Math.random() * 5 + 3).toFixed(3)
                let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2)
                let hour = +(distance / 1000 / averageSpeed).toFixed(1)
                let radarDayData = [distance, averageSpeed, maxSpeed, hour]
                this.cdata.radarData.unshift(radarDayData)

                // 平均指标
                let distanceAvg = Math.round(Math.random() * 8000 + 4000)
                let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3)
                let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2)
                let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1)
                let radarDayDataAvg = [
                    distanceAvg,
                    averageSpeedAvg,
                    maxSpeedAvg,
                    hourAvg
                ]
                this.cdata.radarDataAvg.unshift(radarDayDataAvg)
            }

            // 给图表赋值
            this.options.title.subtext = this.cdata.year + '/' + this.cdata.weekCategory[6],
            this.options.xAxis.data = this.cdata.weekCategory 
            this.options.series[0].data[0].value = this.cdata.radarDataAvg[6]
            this.options.series[0].data[1].value = this.cdata.radarData[6]
            this.options.series[1].data = this.cdata.weekLineData
            this.options.series[2].data = this.cdata.weekMaxData
        }
    }
}
</script>

<style lang="scss">
#bottomRight {
    padding: 0.2rem 0.2rem 0;
    height: 20.5rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        margin-top: 0.5rem;
        margin-left: 0.5rem;
        width: 96%;
        height: 18.5875rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    } //下滑线动态
    .decoration2 {
        position: absolute;
        right: 0.125rem;
    }
    .chart-box {
        margin-top: 0.2rem;
        width: 2.125rem;
        height: 2.125rem;
        .active-ring-name {
            padding-top: 0.125rem;
        }
    }
}
</style>